import { View, Text, Image, ScrollView, Button, Input, Checkbox } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import { useState } from 'react'
import './index.scss'
import FloatLoginBar from '../../components/common/FloatLoginBar'

export default function AIInquiry() {
  useLoad(() => {
    console.log('AIInquiry page loaded.')
  })

  // 商品列表状态
  const [hasProducts, setHasProducts] = useState(false)
  
  // 总价格和折扣
  const [totalPrice, setTotalPrice] = useState('0.00')
  const [discount, setDiscount] = useState('0.00')

  // 上传和添加商品
  const handleUpload = () => {
    console.log('快速上传')
    // 实际项目中这里应该调用上传API
  }

  const handleManualAdd = () => {
    console.log('选择详细')
    // 实际项目中这里应该跳转到选择商品页面
  }

  // 新增全选状态
  const [checkedAll, setCheckedAll] = useState(false)
  const handleCheckAll = () => setCheckedAll(v => !v)

  return (
    <View className='ai-inquiry-container'>
      {/* 顶部搜索和筛选区域 */}
      <View className='header-area'>
        <View className='search-bar'>
          <Text className='location'>定位中</Text>
          <View className='filters'>
            <View className='filter-item'>可订购</View>
            <View className='filter-item'>高评价</View>
            <View className='filter-item'>配送快</View>
          </View>
          <View className='delete-btn'>删除</View>
        </View>

      </View>

      {/* 主内容区域 */}
      <ScrollView className='content-area' scrollY>
        {hasProducts ? (
          <View className='product-list'>
            {/* 这里将来会展示已添加的商品列表 */}
            <Text>商品列表将在这里显示</Text>
          </View>
        ) : (
          <View className='empty-content'>
            <Text className='empty-tip'>暂无询价商品，请选择以下方式添加</Text>
            <View className='btn-group'>
              <Button className='upload-btn' onClick={handleUpload}>快速上传</Button>
              <Button className='manual-add-btn' onClick={handleManualAdd}>选择详情</Button>
            </View>
          </View>
        )}
      </ScrollView>

      {/* 底部价格和结算区域 */}
      <View className='footer-area'>
        <View className='footer-left'>
          <Checkbox value='all' checked={checkedAll} onClick={handleCheckAll} />
          <Text className='footer-all-text'>全选</Text>
        </View>
        <View className='footer-middle'>
          <Text className='price-label'>总额：</Text>
          <Text className='price-value'>￥{totalPrice}</Text>
          <Text className='footer-count'>共x件</Text>
        </View>
        <View className='footer-btns'>
          <Button className='order-btn'>立即下单</Button>
          <Button className='inquiry-btn'>提交询价</Button>
        </View>
      </View>
      <FloatLoginBar />
    </View>
  )
} 